<!--
 * @Author: CHINAKAIYUAN<sunkaiyuan@namenode.cn>
 * @Date: 2022-02-03 14:41:20
 * @LastEditTime: 2023-08-31 09:44:09
 * @LastEditors: 孙开源 && sunkaiyuan@namenode.cn
 * @Description:   :gridOps="gridOptions" allocation
-->
<template>
	<el-dialog
		:title="'大货'"
		v-model="visiable"
		:width="1100"
		destroy-on-close
		@closed="emit('closed')"
	>
		<el-row>
			<el-col
				:span="14"
				style="border-right: 1px solid #ccc; border-top: 1px solid #ccc"
			>
				<sc-VxeTable
					ref="xGrid"
					:tablecode="'pro_pot_rev_browser'"
					:gridOps="revGrid"
					:url="api.pro.pot.list"
					:gridEvts="gridEvents"
					:params="props.params"
				>
				</sc-VxeTable>
			</el-col>
			<el-col
				:span="10"
				style="border-right: 1px solid #ccc; border-top: 1px solid #ccc"
			>
				<el-row>
					<el-col :span="24">
						<sc-VxeTable
							:tablecode="'pro_pot_rev_view_list'"
							:gridOps="{ height: 300 }"
							:data="rawList"
						>
						</sc-VxeTable>
					</el-col>
					<el-col :span="24">
						<sc-VxeTable
							:tablecode="'pro_pot_addraw_list'"
							:gridOps="{ height: 300 }"
							:data="addRawList"
						>
						</sc-VxeTable>
					</el-col>
				</el-row>
			</el-col>
		</el-row>
	</el-dialog>
</template>
<script>
export default {
	name: "pro_pot_details",
};
</script>
<script setup>
import { ref } from "vue";

import api from "@/api";

const props = defineProps({
	params: Object,
});
const emit = defineEmits(["select", "closed"]);
const xGrid = ref({});
const selectItems = ref([]);
const rawList = ref([]);
const addRawList = ref([]);
const visiable = ref(false);

const selectEvt = (data) => {
	emit("select", data, rawList.value);
	emit("closed");
};
const revGrid = ref({
	height: 600,
	rowClassName: ({ row }) => {
		if (row.count_raw_add >= 1 || row.process_id == 14)
			return "backgroudRed";
	},
});
const getRawList = (id) => {
	api.pro.pot.raw.get({ pro_pot_id: id }).then((res) => {
		rawList.value = res.data;
	});
};
const getAddRawList = (id) => {
	api.pro.pot.addRawList.get({ pro_pot_id: id }).then((res) => {
		addRawList.value = res.data;
	});
};
const gridEvents = {
	cellDblclick: ({ row }) => selectEvt(row),
	choose: ({ button }) => selectEvt(button.selectRecords[0]),
	selectData(selectRecords) {
		if (selectRecords.length > 0) {
			selectItems.value = selectRecords[0];
			getRawList(selectItems.value.id);
			getAddRawList(selectItems.value.id);
		}
	},
};
</script>
